This example is incomplete!

It would be nice to compute and display contour lines but the eCharts Apache library does not have that functionality... Thus, it should be possible to compute the contours with conrec.js or d3.js. From the little exploration done so far, it seems to be easier to use d3.js library to display contour lines. As another option, the eCharts Apache library has an additional 'custom' display option which could be used to specify how to render an item. Finally, it is possible to use the VisualMap piecewise builtin feature (see discrete switch) which is an approximation and seems to be working fine. Would any of these options be adequate?

https://github.com/jasondavies/conrec.js
https://github.com/d3/d3-contour

Additional functionality...

Enable cmap selection with a dropdown
Enable click/hover on scatter element
Enable selection of elements (radius)
Enable selection of elements (lasso)
Enable remove contour lines and LinearSegmentedColor

Choose background

Marker size

Opacity

Contours

Discrete

Number of levels

Implementation note

The background represents two different things depending on the feature of interest. If the original feature is boolean (e.g. dengue diagnosis) the z value is related with the number of positive values in the bin. This can be done in two different ways: (i) estimating the density distribution using a gaussian kernel in which only 'true' values found on the bin are considered or (ii) compute the ratio of 'true' to 'positive' samples. Note in the latter the 'false' values are also considered. If the original feature is numeric, the mean of all the values within the bin is computed. Finally, if the feature is enumerated the background might or might not be displayed but these categories can be displayed using the colors in the scatter plot.